import React, { useMemo, useState } from "react";
import { AnimatePresence, motion } from "framer-motion";
import {
ChevronLeft,
ChevronRight,
MapPin,
MessageCircle,
PawPrint,
PhoneCall,
Scissors,
ShieldCheck,
Sparkles,
Stethoscope,
Syringe,
} from "lucide-react";

type Links = {
whatsapp: {
davi: string;
enzo: string;
};
maps: string;
};

type GalleryItem = {
src: string;
alt: string;
tag: string;
};

export default function EquipePetDeTodos() {

const links: Links = useMemo(
() => ({
whatsapp: {
davi: "https://wa.me/5515991729405",
enzo: "https://wa.me/5515996972011",
},
maps:
"https://www.google.com/maps?q=Av.+Barão+de+Tatuí+375+Sorocaba&output=embed",
}),
[]
);

const gallery: GalleryItem[] = useMemo(
() => [
{
src: "/equipe.jpg",
alt: "Equipe Pet de Todos",
tag: "Equipe Pet de Todos",
},
],
[]
);

const [active,setActive] = useState(0)

const next = () => setActive((p)=> wrapIndex(p+1,gallery.length))
const prev = () => setActive((p)=> wrapIndex(p-1,gallery.length))

return (

<div className="min-h-screen bg-gradient-to-b from-emerald-50 via-white to-orange-50">

<Header links={links}/>

<main>

<Hero
gallery={gallery}
active={active}
setActive={setActive}
next={next}
prev={prev}
links={links}
/>

<Stats/>

<Section
id="planos"
eyebrow="Planos"
title="Plano de saúde para seu pet"
subtitle="Escolha um plano e fale direto no WhatsApp"
>
<Plans links={links}/>
</Section>

<Section
id="servicos"
eyebrow="Serviços"
title="O que está incluso"
subtitle="Cobertura pensada para manter seu pet saudável"
>
<Services/>
</Section>

<Section
id="banho"
eyebrow="Banho"
title="Banho a partir de R$19,90"
subtitle="Agende agora mesmo"
>
<BathCTA links={links}/>
</Section>

<Section
id="local"
eyebrow="Localização"
title="Nossa Clínica"
subtitle="Av Barão de Tatuí 375 — Sorocaba"
>
<Location links={links}/>
</Section>

<FinalCTA links={links}/>

</main>

<Footer links={links}/>

</div>

)

}

function Header({links}:{links:Links}){

return(

<div className="sticky top-0 z-40 backdrop-blur bg-white/80 border-b">

<div className="mx-auto max-w-6xl px-4 py-3 flex items-center justify-between">

<a href="#top" className="flex items-center gap-3">

<div className="h-12 w-12 rounded-full overflow-hidden border shadow">

<img
src="/equipe.jpg"
alt="Equipe Pet de Todos"
className="h-full w-full object-cover"
/>

</div>

<div>

<div className="font-extrabold text-lg tracking-tight">
EQUIPE PET DE TODOS
</div>

<div className="text-xs text-gray-500">
Plano • Banho • Cuidado
</div>

</div>

</a>

<nav className="hidden md:flex gap-6 font-semibold text-sm">

<a href="#planos">Planos</a>
<a href="#servicos">Serviços</a>
<a href="#banho">Banho</a>
<a href="#local">Local</a>

</nav>

<a
href={links.whatsapp.davi}
target="_blank"
rel="noreferrer"
className="bg-emerald-600 text-white px-4 py-2 rounded-xl font-bold flex items-center gap-2"
>

<MessageCircle size={16}/>
WhatsApp

</a>

</div>

</div>

)

}

function Hero({gallery,active,setActive,next,prev,links}:any){

const item = gallery[active]

return(

<section className="mx-auto max-w-6xl px-4 pt-12 pb-10 grid lg:grid-cols-2 gap-10 items-center">

<div>

<div className="bg-emerald-100 text-emerald-700 inline-flex gap-2 px-3 py-1 rounded-full text-xs font-bold">
<Sparkles size={14}/>
Seu pet com saúde em dia
</div>

<h1 className="text-4xl md:text-5xl font-black mt-4">
Plano de saúde para seu pet
<span className="text-emerald-700"> por muito menos</span>
</h1>

<p className="mt-4 text-gray-600">
Atendimento simples e rápido. Fale direto conosco no WhatsApp.
</p>

<div className="mt-6 flex gap-3">

<a href="#planos" className="bg-black text-white px-6 py-3 rounded-xl font-bold">
Ver Planos
</a>

<a
href={links.whatsapp.davi}
target="_blank"
className="bg-emerald-600 text-white px-6 py-3 rounded-xl font-bold flex items-center gap-2"
>

<MessageCircle size={18}/>
WhatsApp

</a>

</div>

</div>

<div className="rounded-3xl overflow-hidden shadow-xl border">

<img src={item.src} className="w-full h-full object-cover"/>

</div>

</section>

)

}

function Stats(){

const items=[

{icon:ShieldCheck,title:"Atendimento rápido",desc:"sem burocracia"},
{icon:Stethoscope,title:"Saúde do pet",desc:"acompanhamento"},
{icon:PawPrint,title:"Para cães e gatos",desc:"planos acessíveis"}

]

return(

<div className="mx-auto max-w-6xl px-4 grid md:grid-cols-3 gap-4 pb-10">

{items.map((it,i)=>(

<div key={i} className="bg-white rounded-3xl border p-5 shadow-sm">

<it.icon className="text-emerald-600"/>

<div className="font-bold mt-2">{it.title}</div>

<div className="text-gray-600 text-sm">{it.desc}</div>

</div>

))}

</div>

)

}

function Plans({links}:any){

const plans=[

{
name:"Plano Individual",
price:"R$29,90",
desc:"Para 1 pet",
href:links.whatsapp.davi,
cta:"Falar com Davi"
},

{
name:"Plano Família",
price:"R$39,90",
desc:"Até 4 pets",
href:links.whatsapp.enzo,
cta:"Falar com Enzo"
}

]

return(

<div className="grid lg:grid-cols-2 gap-6">

{plans.map((p,i)=>(

<div key={i} className="bg-white border rounded-3xl p-6 shadow">

<div className="text-xl font-black">{p.name}</div>

<div className="text-4xl font-black mt-2">{p.price}</div>

<div className="text-gray-600">{p.desc}</div>

<a
href={p.href}
target="_blank"
className="mt-4 inline-flex items-center gap-2 bg-emerald-600 text-white px-5 py-3 rounded-xl font-bold"
>

<MessageCircle size={18}/>
{p.cta}

</a>

</div>

))}

</div>

)

}

function Services(){

const items=[

{icon:Stethoscope,title:"Consultas"},
{icon:Syringe,title:"Vacinas"},
{icon:ShieldCheck,title:"Especialidades"},
{icon:Scissors,title:"Cirurgias"}

]

return(

<div className="grid md:grid-cols-4 gap-4">

{items.map((it,i)=>(

<div key={i} className="bg-white border rounded-3xl p-5 shadow-sm text-center">

<it.icon className="mx-auto text-orange-500"/>

<div className="font-bold mt-2">{it.title}</div>

</div>

))}

</div>

)

}

function BathCTA({links}:any){

return(

<div className="bg-gradient-to-r from-emerald-600 to-orange-500 text-white rounded-3xl p-8 flex flex-col md:flex-row justify-between items-center gap-6">

<div>

<div className="text-3xl font-black">
Banho a partir de R$19,90
</div>

<div>Agende pelo WhatsApp</div>

</div>

<div className="flex gap-3">

<a href={links.whatsapp.davi} className="bg-white text-black px-5 py-3 rounded-xl font-bold">
Davi
</a>

<a href={links.whatsapp.enzo} className="bg-black text-white px-5 py-3 rounded-xl font-bold">
Enzo
</a>

</div>

</div>

)

}

function Location({links}:any){

return(

<div className="grid lg:grid-cols-2 gap-6">

<div className="bg-white p-6 rounded-3xl border shadow">

<div className="font-bold text-lg">
Av. Barão de Tatuí 375
</div>

<div className="text-gray-600">
Jd. Vergueiro — Sorocaba
</div>

<a
href={links.maps}
target="_blank"
className="inline-flex items-center gap-2 mt-4 bg-black text-white px-5 py-3 rounded-xl font-bold"
>

<MapPin size={18}/>
Abrir no Maps

</a>

</div>

<iframe
src="https://www.google.com/maps?q=Av.%20Bar%C3%A3o%20de%20Tatu%C3%AD%20375%20Sorocaba&output=embed"
className="w-full h-80 rounded-3xl border"
/>

</div>

)

}

function FinalCTA({links}:any){

return(

<div className="max-w-6xl mx-auto px-4 py-16">

<div className="bg-black text-white rounded-3xl p-10 flex flex-col md:flex-row justify-between items-center gap-6">

<div>

<div className="text-3xl font-black">
Fale conosco no WhatsApp
</div>

<div>Davi ou Enzo irão te atender</div>

</div>

<div className="flex gap-3">

<a href={links.whatsapp.davi} className="bg-white text-black px-5 py-3 rounded-xl font-bold">
Davi
</a>

<a href={links.whatsapp.enzo} className="bg-emerald-500 text-black px-5 py-3 rounded-xl font-bold">
Enzo
</a>

</div>

</div>

</div>

)

}

function Footer({links}:any){

return(

<footer className="border-t mt-10 py-8">

<div className="max-w-6xl mx-auto px-4 flex flex-col md:flex-row justify-between gap-4">

<div>

<div className="font-bold">Equipe Pet de Todos</div>

<div className="text-sm text-gray-500">
Av Barão de Tatuí 375 — Sorocaba
</div>

</div>

<div className="flex gap-3">

<a href={links.whatsapp.davi}>Davi</a>
<a href={links.whatsapp.enzo}>Enzo</a>

</div>

</div>

</footer>

)

}

function wrapIndex(index:number,length:number){

return((index%length)+length)%length

}